<template>
  <div class="tags-nav">
    <div class="btn-con left-btn">
      <Button type="text" @click="handleScroll(240)">
        <Icon :size="18" type="ios-arrow-back" />
      </Button>
    </div>
    <div class="btn-con right-btn" style="right:28px;">
      <Button type="text" @click="handleScroll(-240)">
        <Icon :size="18" type="ios-arrow-forward" />
      </Button>
    </div>
    <div class="close-con right-btn">
      <Button type="text" @click="handleCloseAll" style="padding: 7px 5px;">
        <Icon :size="18" type="ios-close-circle-outline" />
      </Button>
    </div>
    <div class="scroll-outer" ref="scrollOuter"  @DOMMouseScroll="handlescroll"  @mousewheel="handlescroll">
      <div class="scroll-body" ref="scrollBody" :style="{left: tagBodyLeft + 'px'}">
        <Tag type="dot"
          v-for="(item,index) in tagList"
          ref="tagsPageOpened"
          :key="`tag-nav-${index}`"
          :data-route-item="item"
          :id="`tag-nav-${index}`"
          :color="item.isCurrent ? 'primary' : 'default'"
          :closable="item.title != '工作台'"
          @click.native="jump(item,index)"
          @on-close="handleClose(index)"
        >{{item.title}}</Tag>
      </div>
    </div>
  </div>
</template>
<style lang="less">
  @import './tags-nav.less';
</style>
<script>
  import { showTitle, routeEqual } from '../../js/util'

  export default {
      name: 'TagsNav',
      data () {
        return {
          tagBodyLeft: 0,
          outerPadding: 4,
          tagList: []
        }
      },
      methods:{
        getTagElementByRoute (route) {
          this.$nextTick(() => {
            this.refsTag = this.$refs.tagsPageOpened;

            this.refsTag.forEach((item, index) => {
              if (route.path == item.$attrs['data-route-item'].path) {
                let tag = this.refsTag[index].$el
                this.moveToView(tag)
              }
            })
          })
        },
        moveToView (tag) {
          const outerWidth = this.$refs.scrollOuter.offsetWidth
          const bodyWidth = this.$refs.scrollBody.offsetWidth
          if (bodyWidth < outerWidth) {
            this.tagBodyLeft = 0
          } else if (tag.offsetLeft < -this.tagBodyLeft) {
            // 标签在可视区域左侧
            this.tagBodyLeft = -tag.offsetLeft + this.outerPadding
          } else if (tag.offsetLeft > -this.tagBodyLeft && tag.offsetLeft + tag.offsetWidth < -this.tagBodyLeft + outerWidth) {
            // 标签在可视区域
            this.tagBodyLeft = Math.min(0, outerWidth - tag.offsetWidth - tag.offsetLeft - this.outerPadding)
          } else {
            // 标签在可视区域右侧
            this.tagBodyLeft = -(tag.offsetLeft - (outerWidth - this.outerPadding - tag.offsetWidth))
          }
        },
        jump (item,index) {
         console.log(item,'jumpitem');
          this.tagList.forEach(function(item){
            item.isCurrent = false;
          })
          item.isCurrent = true;
          let arr = this.tagList;
          this.tagList = [];
          this.tagList = arr;
          this.$emit('activeName',item.name);
          this.$store.commit('closePage', this.tagList);
          this.$router.push(item.path);
        },
        handleClose (index) {
          /*if(index==0){
            // this.tagList = [];
            // this.$router.push('/work');
            if(this.tagList[index].isCurrent == true){
              if(this.tagList.length==1){
                this.tagList = [];
                this.$router.push('/work')
                return false;
              }
               this.tagList[1].isCurrent = true
            }
           this.tagList.splice(index,1);
           this.$store.commit('closePage', this.tagList);
           return false;
          }*/
          if(this.tagList[index].isCurrent == true){
            this.tagList[index-1].isCurrent = true;
            var path = this.tagList[index-1].path;
            this.$router.push(path);
          }
          this.tagList.splice(index,1);
          this.$store.commit('closePage', this.tagList);
        },
        handleCloseAll () {
          this.tagList = [{'title': '工作台', name:'1','path': '/work', 'isCurrent': true}];
          this.$router.push('/work');
          this.$store.commit('closePage', this.tagList);
        },
        handlescroll (e) {
          var type = e.type
          let delta = 0
          if (type === 'DOMMouseScroll' || type === 'mousewheel') {
            delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40
          }
          this.handleScroll(delta)
        },
        handleScroll (offset){
          const outerWidth = this.$refs.scrollOuter.offsetWidth;
          const bodyWidth = this.$refs.scrollBody.offsetWidth;
          if (offset > 0) {
            this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset)
          } else {
            if (outerWidth < bodyWidth) {
              if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {
                this.tagBodyLeft = this.tagBodyLeft
              } else {
                this.tagBodyLeft = Math.max(this.tagBodyLeft + offset, outerWidth - bodyWidth)
              }
            } else {
              this.tagBodyLeft = 0
            }
          }
        }
      },
      mounted () {
        this.tagList = this.$store.state.tagNavList;
      },
      watch: {
        '$route' (to) {
          this.getTagElementByRoute(to)
        },
        tagCurrent() {
          this.tagList = [];
          this.tagList = this.$store.state.tagNavList;
          // this.handleScroll(-360)
        }
      },
      computed: {
        tagCurrent(){
          return this.$store.state.tagCurrent
        }
      }
    }
</script>
